import './App.css';
import React from 'react';
import LineHeight from './LineHeight';
import LineWeight from './LineWeight';
import LineHead from './LineHead';
import { List, Tabs, WhiteSpace, WingBlank, Card, Calendar, Button, Toast } from 'antd-mobile';
import moment from 'moment';
import * as request from './request';

const tabs = [
  { title: '身高' },
  { title: '体重' },
  { title: '头围' },
];
const Item = List.Item;
const now = new Date();
const apiURL = "/api/services/app/Edu_EventGrowth/GetList?SkipCount=0&MaxResultCount=100";
const apiBzUrl = "/api/services/app/Edu_PrematureBabyCurve/GetList";
const apiURLChild = "/api/services/app/Edu_Children/Get?id=";
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      growthData: [],
      growthBzData: [],
      babyData: {
        weight:0,
        gweek:0,
        correctGestionalAge:0,
        correctAge:0
      },
      show: false,
      config: {
        type: 'one'
      },
      startTime: now
    }
  }
  componentDidMount() {
    this.fetchData();
  }
  fetchData = () => {
    var cid = this.props.match.params.childid;
    cid = cid === undefined ? '' : cid;
    if (cid) {
      var apiurl = apiURL + '&childId=' + cid + '&eType=basic';
      request.get(apiURLChild + cid).then((data) => {
        var babyData = data.result;
        this.setState({ babyData });
        request.get(apiurl)
          .then((data) => {
            var minAge = 99999;
            var maxAge = 0;
            var growthData = data.result.items
            var sex = babyData.sex === "男" ? 1 : 0;
            var btype = babyData.gweek < 40 ? 0 : 1; //早产儿是0
            this.setState({ growthData });
            if (btype === 0) {
              minAge = 0;
              maxAge = 40;
            }
            else {
              minAge = 0;
              maxAge = 36;
            }

            request.get(apiBzUrl + "?sex=" + sex + "&btype=" + btype + "&minAge=" + minAge + "&maxAge=" + maxAge).then((response) => {
              var growthBzData = response.result.items;
              this.setState({ growthBzData });
            });

          })
      });
    }
    else{
      Toast.info('请选择宝宝');
    }
  }

  onSelectHasDisableDate = (dates) => {
    console.warn('onSelectHasDisableDate', dates);
  }

  onConfirm = (startTime, endTime) => {
    document.getElementsByTagName('body')[0].style.overflowY = this.originbodyScrollY;
    this.setState({
      show: false,
      startTime,
      endTime,
    });
  }

  onCancel = () => {
    document.getElementsByTagName('body')[0].style.overflowY = this.originbodyScrollY;
    this.setState({
      show: false,
      startTime: undefined,
      endTime: undefined,
    });
  }
  render() {
    const { growthData, growthBzData, babyData, startTime } = this.state;
    return (
      <div className="App">
        <WhiteSpace size="md" />
        <WingBlank size="md">
          <List className="my-list">
            <Item extra={babyData.name}>宝宝姓名：</Item>
            <Item extra={babyData.gweek + ' 周'}>宝宝胎龄：</Item>            
          </List>
        <WhiteSpace size="md" />
          <Card>
            <Card.Body style={{ padding: 5, margin: 0 }}>
              <Tabs tabs={tabs}
                initialPage={1}
                onChange={(tab, index) => { }}
                onTabClick={(tab, index) => { }}
              >
                <div>
                  <WhiteSpace />
                  <LineHeight growthData={growthData} growthBzData={growthBzData} babyData={babyData} />
                </div>
                <div>
                  <WhiteSpace />
                  <LineWeight growthData={growthData} growthBzData={growthBzData} babyData={babyData} />
                </div>
                <div>
                  <WhiteSpace />
                  <LineHead growthData={growthData} growthBzData={growthBzData} babyData={babyData} />
                </div>
              </Tabs>
            </Card.Body>
          </Card>
          <WhiteSpace size="md" />
          <List className="my-list">
          <Item extra={moment(babyData.birthday).format("YYYY-MM-DD")}>出生日期：</Item>        
            <Item extra={babyData.sex}>宝宝性别：</Item>
            <Item extra={babyData.weight + ' kg'}>宝宝体重：</Item>            
            <Item extra={(babyData.gweek < 40 ? babyData.correctGestionalAge : babyData.correctAge) + (babyData.gweek < 40 ? " 周" : " 月")}>{babyData.gweek < 40 ? "纠正胎龄：" : "纠正月龄："}</Item>
            <Item arrow="horizontal" extra={moment(startTime).format("YYYY-MM-DD")} onClick={() => {
              document.getElementsByTagName('body')[0].style.overflowY = 'hidden';
              this.setState({
                show: true,
              });
            }}>检测日期：</Item>
          </List>
          <WhiteSpace size="md" />
          <Button type="ghost" onClick={() => this.props.history.push('/BabyTest/' + babyData.id)}>儿童评测</Button>
          <WhiteSpace size="md" />
        </WingBlank>
        <Calendar
          {...this.state.config}
          visible={this.state.show}
          onCancel={this.onCancel}
          onConfirm={this.onConfirm}
          onSelectHasDisableDate={this.onSelectHasDisableDate}
          defaultDate={now}
          minDate={new Date(+now - 5184000000)}
          maxDate={new Date(+now + 31536000000)}
        />
      </div>
    )
  };
}
export default App;
